<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!--    引入css 样式-->
    <link rel="stylesheet" href="/layui/css/layui.css">
    <!--    引入js -->
    <script src="/layui/layui.js"></script>
</head>
<body>
<div>
    <div class="layui-form-item">

        <label class="layui-form-label">搜索条件：</label>
        <div class="layui-input-inline">
            <input type="text" id="username" name="username" required lay-verify="required" placeholder="请输入主人名"
                   autocomplete="off"
                   class="layui-input">
        </div>
        <div class="layui-input-inline">
            <input type="text" id="name" name="name" required lay-verify="required" placeholder="请输入宠物名"
                   autocomplete="off"
                   class="layui-input">
        </div>
        <div>
            <button class="layui-btn" onclick="loadData()">搜索</button>

        </div>
    </div>

    <div>
        <button type="button" class="layui-btn" onclick="downLoad()">
            <i class="layui-icon">&#xe67c;</i>下载数据
        </button>
        <table id="demo" lay-filter="test">
        </table>
        <!--    行操作 工具-->
        <script type="text/html" id="toolEventDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
    </div>

</div>

<script>
    var table;
    var $;
    layui.use('table', function () {
        table = layui.table,
            $ = layui.$;

        //完成列表的初始化
        table.render({
            elem: '#demo'
            , id: 'idTest'
            , url: '/api/pets/all.do' //数据接口
            , page: true //开启分页
            , toolbar: '#toolbarDemo'
            , cols: [[ //表头 需要改  跟你的数据接口返回的一样
                {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                , {field: 'uid', title: '主人id'}
                , {field: 'username', title: '主人名称'}

                , {field: 'name', title: '宠物名称'}
                , {field: 'type', title: '宠物类型'}
                , {field: 'varieties', title: '宠物品种'}
                , {field: 'birthday', title: '宠物生日'}
                , {
                    field: 'image', title: '宠物靓照', templet: function (d) {
                        //超过60 字体红色显示
                        return "<img src='" + d.image + "'>";
                    }
                },
                , {field: 'info', title: '简介'}
                , {field: 'ctime', title: '创建时间', sort: true}
                , {title: '操作', templet: '#toolEventDemo'}
            ]]
        });
        //单元格工具事件
        table.on('tool(test)', function (obj) { // 注：test 是 table 原始标签的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            //删除 当前行 1条
            if (layEvent === 'del') {
                layer.confirm('确定删除吗？', function (index) {
                    //请求后端接口  Ajax
                    $.post("/api/pets/del.do", "id=" + data.id, function (res) {
                        if (res.code == 0) {
                            obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存
                        } else {
                            layer.msg(obj.data);
                        }
                        layer.close(index);
                    })
                });
            } else if (layEvent === 'edit') { //修改当前行的数据
                //把当前行对应的数据 存储到本地  localStorage.setItem 把对象转换为json,因为只能存储字符串
                localStorage.setItem("user", JSON.stringify(data));
                location.href = "petsUpdate.html";
            }
        });
    });

    //实现列表数据的重载
    function loadData() {
        // 重载 - 这里以搜索为例
        table.reload('idTest', {
            url: "/api/pets/all.do",
            where: {
                username: $("#username").val(),
                name: $("#name").val(),
                page: 1,
                limit: 10
            }
        });
    }

    function mymethod(birthday) {//根据日期算年龄
        if (birthday) {
            birthday = birthday.split('-');
            // 新建日期对象
            let date = new Date();
            // 今天日期，数组，同 birthday
            let today = [date.getFullYear(), date.getMonth() + 1, date.getDate()];
            // 分别计算年月日差值
            let age = today.map((val, index) => {
                return val - birthday[index]
            })
            // 当天数为负数时，月减 1，天数加上月总天数
            if (age[2] < 0) {
                // 简单获取上个月总天数的方法，不会错
                let lastMonth = new Date(today[0], today[1], 0)
                age[1]--
                age[2] += lastMonth.getDate()
            }
            // 当月数为负数时，年减 1，月数加上 12
            if (age[1] < 0) {
                age[0]--
                age[1] += 12
            }
            return age[0] + '岁';
            console.log(age[0] + '岁' + age[1] + '月' + age[2] + '天');
        }
    }
    function downLoad(){
        //实现数据的下载
        location.href="/api/pets/download.do";
    }
</script>
</body>
</html>